<template>
	<view class="zh-shop-search">
		<u-search 
			:placeholder="searchData.placeholder" 
			:showSearchBtn="searchData.showSearchBtn" 
			type="input" 
			:focus="focus"
			@search="search(searchData.value)"
			v-model="searchData.value"
		></u-search>
		<view class="history">
			<view class="top display-flex justify-between align-center">
				<view class="title">
					<text class="font-34 font-2B2A2A font-bold">搜索历史</text>
				</view>
				<image src="@/static/icons/search_delete_icon.png" class="search-delete-icon" @click="delHistoryList"/>
			</view>
			<view class="bottom display-flex align-center flex-wrap">
				<view class="tag" v-for="(item, index) in searchData.historyList" :key="index" @click="search(item)">
					<text class="font-26 font-302D2D">{{ item }}</text>
				</view>
			</view>
		</view>
	<!-- 	<view class="hots">
			<view class="top display-flex align-center">
				<view class="title">
					<text class="font-34 font-2B2A2A font-bold">热门搜索</text>
				</view>
				<image src="@/static/icons/hot_icon.png" class="hot-icon"/>
			</view>
			<view class="bottom display-flex align-center flex-wrap">
				<view class="display-flex align-center item">
					<text class="mark font-22">1</text>
					<text class="font-28 ml-10">C32</text>
				</view>
				<view class="display-flex align-center item">
					<text class="mark font-22">2</text>
					<text class="font-28 ml-10">CF32</text>
				</view>
				<view class="display-flex align-center item">
					<text class="mark font-22">3</text>
					<text class="font-28 ml-10">CJ40</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
	import { reactive, computed, ref } from 'vue';
	import { util, tip } from '@/utils'
	import { useGoodsHistoryStore } from '@/store/goodsHistory'
	
	const goodsHistoryStore= useGoodsHistoryStore()
	const prevPage = ref('goodsList')
	const searchData: any = reactive({
		placeholder:'',
		showSearchBtn:true,
		focus:true,
		historyList:goodsHistoryStore.getHistoryList(),
		value:'',
	})

	onLoad((options:any) => {
		searchData.placeholder = options.placeholder
		prevPage.value = options.prevPage
	})
	
	// onShow(() => {
	// 	const list:any = goodsHistoryStore.getList() || []
	// 	let str = ''
	// 	for(let i in list) {
	// 		if(i === '0' ) {
	// 			str = list[i]
	// 		} else {
	// 			str = str + '、' + list[i]
	// 		}
	// 	}
	// 	searchData.value = str
	// })
	
	const search = (value:string) => {
		if(!value) return tip.showToast('请输入搜索内容')
		searchData.historyList = searchData.historyList || []
		
		if(!searchData.historyList.includes(value)) {
			goodsHistoryStore.setHistoryList(value)
		}
		
		// if(!goodsHistoryStore.getList().includes(value)) {
		// 	goodsHistoryStore.setList(value)
		// }

		if(prevPage.value === 'index' || prevPage.value === 'shopIndex') {
			uni.redirectTo({url:'/pages/shop/goodsList?keyword=' + value})
		} else if(prevPage.value === 'goodsList'){
			console.log()
			uni.$emit('searchGoodsList', {keyword: value})
			uni.navigateBack({delta:1})
		}
		
	}
	
	const delHistoryList = () => {
		goodsHistoryStore.delHistoryAll()
		searchData.historyList = []
	}
	
	// const redirectTo = (url:string) => {
	// 	uni.redirectTo({url:url})
	// }
</script>

<style lang="scss" scoped>
	.zh-shop-search {
		background-color: $uni-bg-card-color;
		.history {
			padding:60rpx 30rpx 30rpx 40rpx;
			.top {
				.search-delete-icon {
					width: 29rpx;
					height: 33rpx;
				}
			}
			.bottom {
				.tag {
					height: 58rpx;
					line-height: 58rpx;
					background: #F7F7F7;
					border-radius: 29px;
					padding: 0 40rpx;
					text-align: center;
					margin-top: 18rpx;
					margin-right:15rpx;
				}
			}
		}
		.hots {
			padding:60rpx 30rpx 12rpx 40rpx;
			.top {
				.hot-icon {
					width: 25rpx;
					height: 31rpx;
					margin-left: 10rpx;
				}
			}
			.bottom {
				padding: 30rpx;
				.item:nth-child(n + 2 ) {
					margin-left:60rpx;
				}
				.item {
					.mark {
						width: 26rpx;
						height: 26rpx;
						line-height: 26rpx;
						background: #EC1010;
						border-radius: 50%;
						color:#fff;
						text-align: center;
					}
				}
				
			}
		}
	}
</style>
